@extends('admin.layout')

@section('title', '编辑菜单')

@section('content')
<div class="p-6">
    <!-- 页面标题 -->
    <div class="flex items-center justify-between mb-6">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">编辑菜单</h1>
            <p class="text-gray-600 mt-1">{{ $menu->name }}</p>
        </div>
        <div class="flex space-x-3">
            <a href="{{ route('admin.menus.show', $menu) }}" 
               class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-lg flex items-center">
                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                </svg>
                查看详情
            </a>
            <a href="{{ route('admin.menus.index') }}" 
               class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-lg flex items-center">
                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                </svg>
                返回列表
            </a>
        </div>
    </div>

    <div class="max-w-2xl">
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
            <form method="POST" action="{{ route('admin.menus.update', $menu) }}">
                @csrf
                @method('PUT')
                
                <!-- 菜单名称 -->
                <div class="mb-6">
                    <label for="name" class="block text-sm font-medium text-gray-700 mb-2">
                        菜单名称 <span class="text-red-500">*</span>
                    </label>
                    <input type="text" 
                           id="name" 
                           name="name" 
                           value="{{ old('name', $menu->name) }}"
                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('name') border-red-500 @enderror"
                           placeholder="请输入菜单名称"
                           required>
                    @error('name')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- 菜单描述 -->
                <div class="mb-6">
                    <label for="description" class="block text-sm font-medium text-gray-700 mb-2">
                        菜单描述
                    </label>
                    <textarea id="description" 
                              name="description" 
                              rows="4"
                              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('description') border-red-500 @enderror"
                              placeholder="请输入菜单描述">{{ old('description', $menu->description) }}</textarea>
                    @error('description')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- 创建者 -->
                <div class="mb-6">
                    <label for="creator_id" class="block text-sm font-medium text-gray-700 mb-2">
                        创建者 <span class="text-red-500">*</span>
                    </label>
                    <select id="creator_id" 
                            name="creator_id" 
                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('creator_id') border-red-500 @enderror"
                            required>
                        <option value="">请选择创建者</option>
                        @foreach($users as $user)
                            <option value="{{ $user->id }}" {{ old('creator_id', $menu->creator_id) == $user->id ? 'selected' : '' }}>
                                {{ $user->nickname }} ({{ $user->phone }})
                            </option>
                        @endforeach
                    </select>
                    @error('creator_id')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- 来源类型 -->
                <div class="mb-6">
                    <label for="source_type" class="block text-sm font-medium text-gray-700 mb-2">
                        来源类型 <span class="text-red-500">*</span>
                    </label>
                    <select id="source_type" 
                            name="source_type" 
                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('source_type') border-red-500 @enderror"
                            required>
                        <option value="">请选择来源类型</option>
                        <option value="default" {{ old('source_type', $menu->source_type) == 'default' ? 'selected' : '' }}>默认菜单</option>
                        <option value="custom" {{ old('source_type', $menu->source_type) == 'custom' ? 'selected' : '' }}>自定义菜单</option>
                    </select>
                    @error('source_type')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- 来源菜单 -->
                <div class="mb-6" id="source_menu_field" style="display: none;">
                    <label for="source_id" class="block text-sm font-medium text-gray-700 mb-2">
                        基于菜单
                    </label>
                    <select id="source_id" 
                            name="source_id" 
                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('source_id') border-red-500 @enderror">
                        <option value="">请选择要基于的菜单</option>
                        @foreach($sourceMenus as $sourceMenu)
                            <option value="{{ $sourceMenu->id }}" {{ old('source_id', $menu->source_id) == $sourceMenu->id ? 'selected' : '' }}>
                                {{ $sourceMenu->name }} ({{ $sourceMenu->creator->nickname }})
                            </option>
                        @endforeach
                    </select>
                    @error('source_id')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- 状态设置 -->
                <div class="mb-6">
                    <div class="space-y-4">
                        <div class="flex items-center">
                            <input type="checkbox" 
                                   id="is_public" 
                                   name="is_public" 
                                   value="1"
                                   {{ old('is_public', $menu->is_public) ? 'checked' : '' }}
                                   class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                            <label for="is_public" class="ml-2 block text-sm text-gray-900">
                                设为公开菜单
                            </label>
                        </div>
                        
                        <div class="flex items-center">
                            <input type="checkbox" 
                                   id="is_template" 
                                   name="is_template" 
                                   value="1"
                                   {{ old('is_template', $menu->is_template) ? 'checked' : '' }}
                                   class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                            <label for="is_template" class="ml-2 block text-sm text-gray-900">
                                设为模板菜单
                            </label>
                        </div>
                    </div>
                </div>

                <!-- 统计信息 -->
                <div class="mb-6 p-4 bg-gray-50 rounded-lg">
                    <h3 class="text-sm font-medium text-gray-900 mb-3">菜单统计</h3>
                    <div class="grid grid-cols-2 gap-4 text-sm">
                        <div>
                            <span class="text-gray-600">菜品数量:</span>
                            <span class="font-medium text-gray-900">{{ $menu->dishes->count() }}</span>
                        </div>
                        <div>
                            <span class="text-gray-600">使用次数:</span>
                            <span class="font-medium text-gray-900">{{ $menu->usage_count }}</span>
                        </div>
                        <div>
                            <span class="text-gray-600">评分:</span>
                            <span class="font-medium text-gray-900">{{ number_format($menu->rating, 1) }}</span>
                        </div>
                        <div>
                            <span class="text-gray-600">创建时间:</span>
                            <span class="font-medium text-gray-900">{{ $menu->created_at->format('Y-m-d H:i') }}</span>
                        </div>
                    </div>
                </div>

                <!-- 提交按钮 -->
                <div class="flex items-center justify-end space-x-3">
                    <a href="{{ route('admin.menus.show', $menu) }}" 
                       class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                        取消
                    </a>
                    <button type="submit" 
                            class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                        更新菜单
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const sourceTypeSelect = document.getElementById('source_type');
    const sourceMenuField = document.getElementById('source_menu_field');
    
    function toggleSourceMenuField() {
        if (sourceTypeSelect.value === 'custom') {
            sourceMenuField.style.display = 'block';
        } else {
            sourceMenuField.style.display = 'none';
            document.getElementById('source_id').value = '';
        }
    }
    
    sourceTypeSelect.addEventListener('change', toggleSourceMenuField);
    toggleSourceMenuField(); // 初始化
});
</script>
@endsection
